<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>角色管理-WeAdmin Frame型后台管理系统-WeAdmin 1.0</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../../static/css/font.css">
  <link rel="stylesheet" href="../../../static/css/weadmin.css">
  <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
  <style>
    td {
      line-height: 55px;
      font-size: 18px;
      vertical-align: middle;
      margin-top: 7px;
    }
    input[type="checkbox"] {
      height: 25px;
      width: 25px;
      vertical-align: middle;
      margin-left: 30px;
      line-height: 40px;
    }
    input[type=checkbox]:checked{
      background-color: white;
      color: #00FF00;
    }
  </style>
</head>

<body>
  <div class="weadmin-body">
    <form action="" method="post" class="layui-form-pane">
      <div class="layui-form-item">
        <label for="name" class="layui-form-label">
          <span class="we-red">*</span>角色名
        </label>
        <div class="layui-input-inline">
          <input type="text" id="name" name="name" required="" lay-verify="required" autocomplete="off"
            class="layui-input">
        </div>
      </div>
      <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">
          拥有权限
        </label>
        <table class="layui-table layui-input-block">
          <tbody>
            <tr>
              <td>
                用户管理
                <input name="userAll" type="checkbox" id="user-manage" value="用户管理" style="margin-left: 0">
              </td>
              <td>
                <div>
                  <input name="user" type="checkbox" value="用户删除"> 用户删除
                  <input name="user" type="checkbox" value="用户修改"> 用户修改
                  <input name="user" type="checkbox" value="用户改密"> 用户改密
                  <input name="user" type="checkbox" value="用户停用"> 用户停用
                  <input name="user" type="checkbox" value="用户列表"> 用户列表
                </div>
              </td>
            </tr>
            <tr>
              <td>
                商品管理
                <input name="productAll" id="product-manage" type="checkbox" value="商品管理" style="margin-left: 0">
              </td>
              <td>
                <div class="">
                  <input name="product" type="checkbox" value="商品添加"> 商品添加
                  <input name="product" type="checkbox" value="商品删除"> 商品删除
                  <input name="product" type="checkbox" value="商品修改"> 商品修改
                  <input name="product" type="checkbox" value="商品停用"> 商品停用
                  <input name="product" type="checkbox" value="商品列表"> 商品列表
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="layui-form-item layui-form-text">
        <label for="desc" class="layui-form-label">
          描述
        </label>
        <div class="layui-input-block">
          <textarea placeholder="请输入内容" id="desc" name="desc" class="layui-textarea"></textarea>
        </div>
      </div>
      <div class="layui-form-item">
        <button class="layui-btn add" lay-submit="" lay-filter="add">确定</button>
        <input type="hidden" name="dataId" id="dataId" value="" />
      </div>
    </form>
  </div>
  <script src="../../../static/lib/layui/layui.js" type="text/javascript"></script>
  <script>
    $("#product-manage").click(function () {
      $("input[name='product']").prop("checked",this.checked)
    })

    $("input[name='product']").click(function () {
      var check_flag = false
      $("input[name='product']").each(function () {
        if (!$(this).prop('checked')) {
          check_flag = true
        }
      })
      if (check_flag) $("input[name='productAll']").prop("checked",false)
      else $("input[name='productAll']").prop("checked",this.checked)
    })

    $("#user-manage").click(function () {
      $("input[name='user']").prop("checked",this.checked)
    })

    $("input[name='user']").click(function () {
      var check_flag = false
      $("input[name='user']").each(function () {
        if (!$(this).prop('checked')) check_flag = true
      })
      if (check_flag) $("input[name='userAll']").prop("checked",false)
      else $("input[name='userAll']").prop("checked",this.checked)
    })
  </script>
  <script type="text/javascript">
    layui.extend({
      admin: '{/}../../static/js/admin'
    });
    layui.use(['form', 'layer', 'admin', 'jquery'], function () {
      var form = layui.form,
              admin = layui.admin,
              $ = layui.jquery,
              layer = layui.layer;

      //页面初始化
      $(function () {
        setTimeout(function () {
          frameVal();
        }, 100);
      });
      var dataId
      function frameVal() {
        dataId = $('input[name="dataId"]').val();
        parent.layui.jquery("#roleList tr").each(function () {
          if ($(this).attr('data-id') == dataId) {
            var tdArr = $(this).children('td');
            var username = tdArr.eq(2).text();
            var desc = tdArr.eq(4).text();
            $('input[name="name"]').val(username);
            $("#desc").val(desc)
            var permission = tdArr.eq(3).text();
            var permissionList = permission.split("，")
            $.each(permissionList,function (index,item) {
              if (item == "用户管理") $('input[name="user"]').prop("checked",true)
              if (item == "商品管理") $('input[name="product"]').prop("checked",true)
              $('input[value="'+item+'"]').prop("checked",true)
            })
            form.render();
          }
        });
      }

      //监听提交
      var permission = ""
      var name = ""
      var desc = ""
      $(".add").click(function () {
        if ($("#user-manage").prop("checked")) {
          permission+=$("#user-manage").val()
          permission+="，"
        } else {
          $("input[name='user']:checked").each(function () {
            permission+=$(this).val()
            permission+="，"
          })
        }
        if ($("#product-manage").prop("checked")) {
          permission+=$("#product-manage").val()
          permission+="，"
        } else {
          $("input[name='product']:checked").each(function () {
            permission+=$(this).val()
            permission+="，"
          })
        }
        permission = permission.substring(0,permission.length-1)
        name = $("#name").val()
        desc = $("#desc").val()
      })
      form.on('submit(add)', function () {
        var role_data = {roleName: name,permission: permission,description: desc}
        $.post({
          url: "/role/update/"+dataId,
          contentType: "application/json;charset=UTF-8",
          data: JSON.stringify(role_data),
          success: function () {
            var tdArr = parent.layui.jquery("#roleList tr[data-id='"+dataId+"']").children("td")
            tdArr.eq(2).text(name);
            tdArr.eq(3).text(permission);
            tdArr.eq(4).text(desc);
            form.render();
          },
          async: false
        })
        layer.alert("修改成功", {
          icon: 6
        }, function () {
          // 获得frame索引
          var index = parent.layer.getFrameIndex(window.name);
          //关闭当前frame
          parent.layer.close(index);
        });
        return false;
      });

    });
  </script>
</body>

</html>